<script lang="ts" setup>
import { ref, onMounted, computed, nextTick } from 'vue'
const dialogVisible = ref(false)
const showDialogClose = ref(false)
const openDialog = () => {
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :show-close="showDialogClose"
    :title="`上传进度`"
    width="30%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-form label-position="top" class="globalProgress">
      <el-form-item :label="formLabel">
        <el-progress
          :show-text="showText"
          :status="percentage === 100 && isFinish ? 'success' : status ? status : ''"
          :stroke-width="15"
          :percentage="percentage"
        >
          <template #default="{ percentage }">
            <span class="percentage-value" v-if="percentage !== 100 && !isFinish"
              >{{ percentage }}%</span
            >
            <span class="percentage-value" v-loading="true" v-if="percentage === 100 && !isFinish">
            </span>
          </template>
        </el-progress>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
